<template>
<!-- 同用户登录界面 -->
    <div id="canvas-wrap" style="height: 900px;">
      <canvas id="canvas-content"></canvas>
      <div id="root">
          <div class="header">
              <h1>用户登录界面</h1>
              <div class="login_box">
                  <label for="account">账号:</label>
                  <input type="account" id="account" v-model.trim="userInfo.account" placeholder="请输入管理员名">
              </div>
              <div class="login_box">
                  <label for="password" class="password">密码:</label>
                  <input type="password" id="password" class="passwordInput" v-model.lazy="userInfo.password" placeholder="请输入密码">
              </div>
              <div class="login_box">
                  <label for="Vercode" class="Vercode">验证码:</label>
                  <input type="text" id="code" class="code" v-model.lazy="userInfo.code" disabled="disabled" placeholder="等待验证码">
                  <button class="getcode" @click="getCode">获取验证码</button>
              </div>
          </div>
          <div class="footer">
              <button type="submit" @click="submitData()" id="btn_sub">提交</button>
              <button id="btn_res" @click="rest()">重置</button>
              <input type="button" value="注册" @click="goRegister()" id="btn_reg">
          </div>
        </div>
    </div>
</template>

<script>
// import axios from 'axios'
import { canvasInit } from '../../utils/star.js'
export default {
    name:'Login',
    data() {
      return {
        userList:[],
        timer:null,
        userInfo:{
          account:'',
          password:'',
          code:''
        }
      }
    },
    mounted() {
        // this.getUserlist()
        canvasInit()
    },
    methods: {
        // 重置
        rest(){
            this.userInfo.code = ''
            this.userInfo.account= ''
            this.userInfo.password = ''
        },
        // 登录逻辑
        // 17777777777
        // submitData(){
        //     var flag=0
        //     if(this.userInfo.code != ''){
        //         for(var i=0;i<this.userList.length;i++){
        //             if(this.userList[i].userAccount == this.userInfo.account && this.userList[i].userPassword == this.userInfo.password){
        //                 this.$router.push('/home')
        //                 flag = 1 
        //                 console.log("用户id",this.userList[i].userId)
        //                 // 生成Token值，唯一识别用户
        //                 localStorage.setItem("Token",this.userList[i].userId)
        //                 // this.$bus.$emit('getuserId',this.userList[i].userId)
        //             }
        //         } 
        //         if(flag == 0){
        //             alert("确定一下您的账号、密码是否输入正确；若未注册过该系统，点击注册按钮先注册")
        //             this.userInfo.account = ''
        //             this.userInfo.password = ''
        //             this.userInfo.code = ''
        //         }
        //     }else{
        //         alert("先获取验证码")
        //     }
            
        //     console.log("账号密码为:",this.userInfo.account,this.userInfo.password,this.userInfo.code)
        //     console.log(this.userList)
        // },
        // getUserlist(){
        //     // 获取所有用户
        //     axios.get("http://localhost:8080/api/getAllUser/getAllUserlist",{
        //       params:{
        //         id:1
        //       }
        //     }).then(
        //       res=>{
        //         for(var i= 0;i<res.data.length;i++){
        //             var tem = Number(String(res.data[i].userCreatetime).slice(11,13))+8
        //             var d = tem%24 > 10? tem%24 :'0'+tem%24
        //             res.data[i].userCreatetime = String(res.data[i].userCreatetime).slice(0,10)+ ' ' +d + String(res.data[i].userCreatetime).slice(13,19)
        //             // state.usersubgoods.push(value [i])
        //             this.userList = res.data
        //         }
        //         console.log(this.userList)
        //       },
        //       error=>{
        //         console.log("88",error.message)
        //       }
        //     )
        //     // console.log("账号密码为:",this.userInfo.account,this.userInfo.password,this.userInfo.code)
        // },
        //随机生成6位验证码
        getCode(){
            //随机生成6位数
            this.userInfo.code = Math.floor(Math.random()*1000000)
            this.userInfo.code = this.userInfo.code < 100000 ? '0'+this.userInfo.code : this.userInfo.code 
            console.log(String(this.userInfo.code).length)
            console.log(this.userInfo)
        },
        goRegister(){
            this.$router.push('/register')
        }
    },
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#canvas-wrap {
	position: relative;
	width: 100%;
  /* height: 900px; */
	/* background: #333; */
    background-image: url('./img/bg.jpg');
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}
#root{
    background:rgba(186, 186, 186, 0.413);
    /* background: rgb(97, 200, 255); */
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    border: solid 1px black;
    width: 550px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -150px;
}
.form{
    width: 100%;
    height: 100%;
}
.header{
    width: 100%;
    height: 70%;
}
.header h1{
    width: 100%;
    height: 33%;
    text-align: center;
    line-height: 78px;
}
.login_box{
    height: 25%;
    padding: 6px 150px;
}
.login_box input{
    width: 200px;
    height: 30px;
    margin-bottom: 5px;
    padding-left: 5px;
}
.login_box:last-child input{
    width: 100px;
}
.footer{
    height: 30%;
    padding: 25.5px;
    text-align: center;
}
#btn_sub,
#btn_res,
#btn_reg{
    width: 80px;
    height: 34px;
    margin-left: 5px;
}
.getcode{
    width: 85px;
    height: 30px;
}
</style>